<template>
  <div>
    <div class="btn iconfont" @click="onOpened">&#xe602;</div>
    <el-menu default-active="2-4" class="el-menu-vertical-demo" text-color="#c1c1c1" active-text-color="#738c91" :collapse="isCollapse">
      <!-- 侧边栏顶部图片 -->
      <el-menu-item :style="{ height: styleHeight }" class="sidebar-head item-hover" index="1">
        <img class="logo" src="../../assets/img/logo.png" alt="logo">
      </el-menu-item>
      <!-- 各item条块 -->
      <el-submenu index="2">
        <template slot="title" class="item-hover">
          <i class="iconfont side-icon">&#xe626;</i>
          <span slot="title">采购价格看板管理</span>
        </template>
        <!-- 路由跳转 -->
        <el-menu-item-group class="item-group">
          <el-menu-item index="2-1" @click.native="toPublish">
            <span class="item-dot"></span>
            发布物料
          </el-menu-item>
          <el-menu-item index="2-2" @click.native="toManage">
            <span class="item-dot"></span>
            物料管理
          </el-menu-item>
          <el-menu-item index="2-3">
            <span class="item-dot"></span>
            报价看板
          </el-menu-item>
          <el-menu-item index="2-4">
            <span class="item-dot"></span>
            购物车
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont side-icon">&#xe631;</i>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            商品管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="iconfont side-icon">&#xe65c;</i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            订单管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            订单管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            订单管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="iconfont side-icon">&#xe60a;</i>
          <span slot="title">收藏管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            收藏管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            收藏管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="iconfont side-icon">&#xe627;</i>
          <span slot="title">企业信息</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            收货地址
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            企业信息
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <i class="iconfont side-icon">&#xe627;</i>
          <span slot="title">支付管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="8">
        <template slot="title">
          <i class="iconfont side-icon">&#xe627;</i>
          <span slot="title">支付管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="9">
        <template slot="title">
          <i class="iconfont side-icon">&#xe627;</i>
          <span slot="title">支付管理</span>
        </template>
        <el-menu-item-group class="item-group">
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
          <el-menu-item>
            <span class="item-dot"></span>
            支付管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      isCollapse: true,
      styleHeight: '82px'
    }
  },
  methods: {
    // 顶部图片区域展开动效
    onOpened () {
      this.isCollapse = !this.isCollapse
      this.styleHeight = this.isCollapse ? '82px' : '160px'
    },
    // 路由跳转
    toManage () {
      this.$router.push({
        path: '/Manage'
      })
    },
    toPublish () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~styles/total.less";
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .item-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    border: 1px solid #cecbcb;
    border-radius: 50%;
    background-color: #383838;
    margin-right: 20px;
  }
  // 侧边栏选项hover弹出效果
  .el-menu-item {
    background-color: #383838;
  }
  .el-menu-item:hover {
    background: #4b4b4b;
  }
  // button按钮和hover效果
  .btn {
    position: absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 20px;
    margin-top: 0;
    cursor: pointer;
    z-index: 1;
  }
  .btn:hover {
    background-color: #eee7e7;
    color: @orange;
  }
  .el-menu-vertical-demo {
    height: 100%;
    background-color: #2c2c2c;
    .side-icon {
      margin-left: -4px;
      font-size: 24px;
      color: #c1c1c1;
    }
    .item-group {
      background-color: #383838;
    }
  }
  .sidebar-head {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 !important;
    border-bottom: 2px solid rgb(66, 66, 66);
    .logo {
      width: 100%;
      min-width: 64px;
      max-width: 160px;
    }
  }
  .item-hover:hover {
    background-color: #252525 !important;
  }
</style>
